import React from 'react';
import bannerImg from '@/assets/image/doc-banner.png';
import { HeaderLink } from '../components/HeaderLink';
import { Image } from 'antd';
import consoleImg from '@/assets/image/screenshot/console-panel.png';
import networkImg from '@/assets/image/screenshot/network-panel.png';
import pageImg from '@/assets/image/screenshot/page-panel.png';
import storageImg from '@/assets/image/screenshot/storage-panel.png';
import systemImg from '@/assets/image/screenshot/system-panel.png';

export const githubUrl = import.meta.env.VITE_GITHUB_REPO;

<img src={bannerImg} style={{ width: '100%' }} />

<HeaderLink level={2} slug="introduction" children="紹介" />

<b>PageSpy</b> は、リモートWebプロジェクトのデバッグに使用されるツールです。ネイティブAPIへのラッパーをベースに、ネイティブメソッドの呼び出し時にパラメーターをフィルタリング、変換し、デバッグクライアントが消費できるように整理したフォーマットに変換します。デバッグクライアントは、メッセージデータを受け取り、データを表示するための対話型コンソールのような機能インターフェースを提供します。

<HeaderLink level={2} slug="when-to-use" children="いつ使用するか" />

<u>
  *ローカルでのコンソールデバッグができないシナリオは、すべて **PageSpy**
  が活躍できる場面です*
</u>
！一緒に以下のシナリオを見てみましょう：

- **H5、Webviewアプリのローカルデバッグ**：これまで、一部の製品は情報をH5で表示できるパネルを提供していましたが、モバイルデバイスの画面は小さく、操作が不便で、表示がユーザーフレンドリーでなく、情報が切り捨てられるなどの問題がありました。
- **リモートワーク、地域を超えた協力**：伝統的なコミュニケーション手段、例えばメール、電話、ビデオ会議などでは、コミュニケーションの効率が低く、障害情報が不十分で、誤解や誤判が生じやすいです。
- **ユーザーターミナルで白い画面の問題が発生**：従来の問題の特定方法には、データモニタリング、ログ分析などが含まれており、これらの方法はトラブルシューティング担当者がビジネス要件のシナリオと技術実装を理解する必要があります。

<HeaderLink level={2} slug="how-to-use" children="使用方法" />

データの安全性と利便性を考慮して、完全な<a href={`${githubUrl}#how-to-use`} target="\_blank">デプロイメントガイド</a>を提供しています。

ローカルデプロイメントが完了すると、「SDK をインジェクト」メニューが表示され、ビジネスプロジェクトに設定と統合する方法を確認できます。

<HeaderLink level={2} slug="feature-overview" children="機能概要" />

- コンソールパネル： `console.<log | info | warn | error>` ログメッセージを表示し、コードを実行できます；

<Image width="90%" style={{ margin: '0 auto' }} src={consoleImg} />

- ネットワークパネル： `fetch` | `XMLHttpRequest` | `navigator.sendBeacon` のネットワークリクエストを表示します；

<Image width="90%" style={{ margin: '0 auto' }} src={networkImg} />

- エレメントパネル：現在のページを表示し、HTML ノードツリーを表示します；

<Image width="90%" style={{ margin: '0 auto' }} src={pageImg} />

- ストレージパネル： `localStorage` | `sessionStorage` | `cookie` | `indexedDB` キャッシュデータを表示します；

<Image width="90%" style={{ margin: '0 auto' }} src={storageImg} />

- システムパネル：ユーザーエージェント情報を表示し、API の互換性を確認します。

<Image width="90%" style={{ margin: '0 auto' }} src={systemImg} />

さらに、新しいデータやデータが変更された場合、リアルタイム通知を受け取ります。

<p style={{ marginTop: 28 }}>
  <a href={githubUrl}>GitHub</a> でPRまたはissueを提出いただければ幸いです。
</p>
